Rezultat testa zadetka WebXR: Obdelava rezultatov metanja žarkov za poglobljene izkušnje

API WebXR Device odpira vznemirljive možnosti za ustvarjanje poglobljenih izkušenj obogatene resničnosti (AR) in navidezne resničnosti (VR) neposredno v brskalniku. Eden od temeljnih vidikov gradnje interaktivnih aplikacij WebXR je razumevanje in učinkovita uporaba rezultatov testa zadetka. Ta objava v blogu ponuja obsežen vodnik za obdelavo rezultatov testa zadetka, pridobljenih z metanjem žarkov, kar vam omogoča ustvarjanje intuitivnih in privlačnih uporabniških interakcij v vaših prizorih WebXR.

Kaj je metanje žarkov in zakaj je pomembno v WebXR?

Metanje žarkov (ray casting) je tehnika, ki se uporablja za določanje, ali se žarek, ki izvira iz določene točke in smeri, seka z objekti v 3D prizoru. V WebXR se metanje žarkov običajno uporablja za simulacijo uporabnikovega pogleda ali trajektorije virtualnega objekta. Ko se žarek seka z resnično površino (v AR) ali virtualnim objektom (v VR), se ustvari rezultat testa zadetka.

Rezultati testa zadetka so ključni iz več razlogov:

• Postavitev virtualnih objektov: V AR testi zadetka omogočajo natančno postavitev virtualnih objektov na resnične površine, kot so mize, tla ali stene.
• Uporabniška interakcija: S sledenjem, kam uporabnik gleda ali kaže, testi zadetka omogočajo interakcije z virtualnimi objekti, kot so izbiranje, manipuliranje ali aktiviranje.
• Navigacija: V VR okoljih se testi zadetka lahko uporabljajo za implementacijo navigacijskih sistemov, ki uporabnikom omogočajo teleportacijo ali premikanje po prizoru s kazanjem na določene lokacije.
• Zaznavanje trkov: Testi zadetka se lahko uporabljajo za osnovno zaznavanje trkov, s čimer se ugotavlja, kdaj virtualni objekt trči v drug objekt ali resnični svet.

Razumevanje API-ja za test zadetka WebXR

API za test zadetka WebXR (WebXR Hit Test API) ponuja potrebna orodja za izvajanje metanja žarkov in pridobivanje rezultatov testa zadetka. Tukaj je razčlenitev ključnih konceptov in funkcij:

XRRay

XRRay predstavlja žarek v 3D prostoru. Opredeljen je z izhodiščno točko in smernim vektorjem. XRRay lahko ustvarite z metodo XRFrame.getPose(), ki vrne pozo sledenega vhodnega vira (npr. uporabnikova glava, ročni krmilnik). Iz poze lahko izpeljete izvor in smer žarka.

XRHitTestSource

XRHitTestSource predstavlja vir rezultatov testa zadetka. Vir testa zadetka ustvarite z metodo XRSession.requestHitTestSource() ali XRSession.requestHitTestSourceForTransientInput(). Prva metoda se na splošno uporablja za neprekinjeno testiranje zadetkov na podlagi trajnega vira, kot je položaj uporabnikove glave, medtem ko je druga namenjena prehodnim vhodnim dogodkom, kot so pritiski na gumbe ali geste.

XRHitTestResult

XRHitTestResult predstavlja eno samo točko presečišča med žarkom in površino. Vsebuje informacije o presečišču, kot sta razdalja od izvora žarka do točke zadetka in poza točke zadetka v referenčnem prostoru prizora.

XRHitTestResult.getPose()

Ta metoda vrne XRPose točke zadetka. Poza vsebuje položaj in orientacijo točke zadetka, ki ju je mogoče uporabiti za postavitev virtualnih objektov ali izvajanje drugih transformacij.

Obdelava rezultatov testa zadetka: Vodnik po korakih

Poglejmo si postopek pridobivanja in obdelave rezultatov testa zadetka v aplikaciji WebXR. Ta primer predpostavlja, da uporabljate knjižnico za upodabljanje, kot je three.js ali Babylon.js.

1. Zahtevanje vira testa zadetka

Najprej morate zahtevati vir testa zadetka od XRSession. To se običajno naredi po zagonu seje. Določiti boste morali koordinatni sistem, v katerem želite prejeti rezultate testa zadetka. Na primer:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Pojasnilo:

• xrSession.requestHitTestSource(): Ta funkcija zahteva vir testa zadetka od seje XR.
• { space: xrSession.viewerSpace }: To določa koordinatni sistem, v katerem bodo vrnjeni rezultati testa zadetka. viewerSpace je relativno na položaj gledalca, medtem ko je local relativno na izvor XR. Uporabite lahko tudi localFloor za sledenje glede na tla.
• Obravnava napak: Blok try...catch zagotavlja, da so napake med ustvarjanjem vira testa zadetka zajete in zabeležene.

2. Izvajanje testa zadetka v animacijski zanki

Znotraj vaše animacijske zanke (funkcije, ki upodablja vsak sličico), boste morali izvesti test zadetka z metodo XRFrame.getHitTestResults(). Ta metoda vrne polje objektov XRHitTestResult, ki predstavljajo vsa najdena presečišča v prizoru.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Pojasnilo:

• frame.getViewerPose(xrSession.referenceSpace): Pridobi pozo gledalca (naglavnika). To je potrebno za določitev, kje je gledalec in kam gleda.
• frame.getHitTestResults(xrHitTestSource): Izvede test zadetka z uporabo predhodno ustvarjenega vira testa zadetka.
• hitTestResults.length > 0: Preveri, ali so bila najdena kakšna presečišča.

3. Obdelava rezultatov testa zadetka

Funkcija processHitTestResults() je mesto, kjer boste obravnavali rezultate testa zadetka. To običajno vključuje posodobitev položaja in orientacije virtualnega objekta na podlagi poze točke zadetka.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Pojasnilo:

• hitTestResults[0]: Pridobi prvi rezultat testa zadetka. Če je možnih več presečišč, boste morda morali iterirati skozi celotno polje in izbrati najustreznejši rezultat glede na logiko vaše aplikacije.
• hit.getPose(xrSession.referenceSpace): Pridobi pozo točke zadetka v določenem referenčnem prostoru.
• virtualObject.position.set(...) in virtualObject.quaternion.set(...): Posodobita položaj in rotacijo (kvaternion) virtualnega objekta (npr. Mesh v knjižnici three.js), da se ujemata s pozo točke zadetka.
• Vizualna povratna informacija: Primer vključuje tudi kodo za prikaz vizualne povratne informacije na točki zadetka, kot je krog ali preprost označevalec, ki uporabniku pomaga razumeti, kje interagira s prizorom.

Napredne tehnike testiranja zadetkov

Poleg osnovnega zgornjega primera obstaja več naprednih tehnik, ki jih lahko uporabite za izboljšanje implementacij testiranja zadetkov:

Testiranje zadetkov s prehodnim vnosom

Za interakcije, ki jih sproži prehodni vnos, kot so pritiski na gumbe ali geste z rokami, lahko uporabite metodo XRSession.requestHitTestSourceForTransientInput(). Ta metoda ustvari vir testa zadetka, ki je specifičen za posamezen vhodni dogodek. To je uporabno za preprečevanje nenamernih interakcij, ki temeljijo na neprekinjenem testiranju zadetkov.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Filtriranje rezultatov testa zadetka

V nekaterih primerih boste morda želeli filtrirati rezultate testa zadetka na podlagi določenih kriterijev, kot je razdalja od izvora žarka ali vrsta presekane površine. To lahko dosežete z ročnim filtriranjem polja XRHitTestResult po njegovi pridobitvi.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Uporaba različnih referenčnih prostorov

Izbira referenčnega prostora (viewerSpace, local, localFloor ali drugi prostori po meri) bistveno vpliva na interpretacijo rezultatov testa zadetka. Upoštevajte naslednje:

• viewerSpace: Zagotavlja rezultate glede na položaj gledalca. To je uporabno za ustvarjanje interakcij, ki so neposredno vezane na uporabnikov pogled.
• local: Zagotavlja rezultate glede na izvor XR (izhodiščno točko seje XR). To je primerno za ustvarjanje izkušenj, kjer objekti ostanejo fiksni v fizičnem okolju.
• localFloor: Podobno kot local, vendar je os Y poravnana s tlemi. To poenostavi postopek postavljanja predmetov na tla.

Izberite referenčni prostor, ki se najbolje ujema z zahtevami vaše aplikacije. Eksperimentirajte z različnimi referenčnimi prostori, da boste razumeli njihovo obnašanje in omejitve.

Strategije optimizacije za testiranje zadetkov

Testiranje zadetkov je lahko računsko intenziven proces, zlasti v zapletenih prizorih. Tukaj je nekaj strategij optimizacije, ki jih je vredno upoštevati:

• Omejite pogostost testov zadetka: Teste zadetka izvajajte le, ko je to potrebno, namesto v vsaki sličici. Na primer, teste zadetka lahko izvajate le, ko uporabnik aktivno interagira s prizorom.
• Uporabite hierarhijo omejevalnih volumnov (BVH): Če izvajate teste zadetka na velikem številu objektov, razmislite o uporabi BVH za pospešitev izračunov presečišč. Knjižnice, kot sta three.js in Babylon.js, ponujajo vgrajene implementacije BVH.
• Prostorsko razdeljevanje: Prizor razdelite na manjše regije in izvajajte teste zadetka samo na regijah, ki najverjetneje vsebujejo presečišča. To lahko znatno zmanjša število objektov, ki jih je treba preveriti.
• Zmanjšajte število poligonov: Poenostavite geometrijo svojih modelov, da zmanjšate število poligonov, ki jih je treba testirati. To lahko izboljša delovanje, zlasti na mobilnih napravah.
• WebWorker: prenesite izračune na spletnega delavca (web worker), da zagotovite, da postopek testa zadetka ne blokira glavne niti.

Medplatformski premisleki

Cilj WebXR je biti medplatformski, vendar lahko pride do manjših razlik v delovanju med različnimi napravami in brskalniki. Upoštevajte naslednje:

• Zmogljivosti naprave: Vse naprave ne podpirajo vseh funkcij WebXR. Uporabite zaznavanje funkcij, da ugotovite, katere funkcije so na voljo, in ustrezno prilagodite svojo aplikacijo.
• Vhodni profili: Različne naprave lahko uporabljajo različne vhodne profile (npr. generic-touchscreen, hand-tracking, gamepad). Zagotovite, da vaša aplikacija podpira več vhodnih profilov in zagotavlja ustrezne nadomestne mehanizme.
• Zmogljivost: Zmogljivost se lahko med različnimi napravami močno razlikuje. Optimizirajte svojo aplikacijo za najmanj zmogljive naprave, ki jih nameravate podpirati.
• Združljivost z brskalniki: Prepričajte se, da je vaša aplikacija preizkušena in deluje v večjih brskalnikih, kot so Chrome, Firefox in Edge.

Globalni primeri aplikacij WebXR, ki uporabljajo testiranje zadetkov

Tukaj je nekaj primerov aplikacij WebXR, ki učinkovito uporabljajo testiranje zadetkov za ustvarjanje prepričljivih in intuitivnih uporabniških izkušenj:

• IKEA Place (Švedska): Uporabnikom omogoča virtualno postavitev pohištva IKEA v njihove domove z uporabo AR. Testiranje zadetkov se uporablja za natančno pozicioniranje pohištva na tla in druge površine.
• Sketchfab AR (Francija): Uporabnikom omogoča ogled 3D modelov iz Sketchfaba v AR. Testiranje zadetkov se uporablja za postavitev modelov v resnični svet.
• Obogatene slike (različno): Številne aplikacije AR uporabljajo sledenje slik v kombinaciji s testiranjem zadetkov za sidranje virtualne vsebine na določene slike ali označevalce v resničnem svetu.
• Igre WebXR (globalno): Številne igre se razvijajo z uporabo WebXR, pri čemer se mnoge zanašajo na testiranje zadetkov za postavitev predmetov, interakcijo in navigacijo.
• Virtualni ogledi (globalno): Poglobljeni ogledi lokacij, muzejev ali nepremičnin pogosto uporabljajo testiranje zadetkov za navigacijo uporabnika in interaktivne elemente znotraj virtualnega okolja.

Zaključek

Obvladovanje rezultatov testa zadetka WebXR in obdelave metanja žarkov je bistvenega pomena za ustvarjanje prepričljivih in intuitivnih izkušenj AR in VR na spletu. Z razumevanjem temeljnih konceptov in uporabo tehnik, opisanih v tej objavi v blogu, lahko ustvarite poglobljene aplikacije, ki neopazno združujejo virtualni in resnični svet, ali ustvarite privlačna virtualna okolja z naravnimi in intuitivnimi uporabniškimi interakcijami. Ne pozabite optimizirati svoje implementacije testiranja zadetkov za zmogljivost in upoštevati medplatformsko združljivost, da zagotovite nemoteno izkušnjo za vse uporabnike. Ker se ekosistem WebXR še naprej razvija, pričakujte nadaljnje napredke in izboljšave API-ja za testiranje zadetkov, kar bo odprlo še več ustvarjalnih možnosti za razvoj poglobljenega spleta. Za najnovejše informacije se vedno posvetujte z najnovejšimi specifikacijami WebXR in dokumentacijo brskalnikov.